<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!-- f标签 取得jsp一些函数工具 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="f"%>
<!-- 格式化标签 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<% String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<form>
			姓名:<input type="text" name="userName" id="userName"><br>
			性别:<input type="radio" name="userSex" value="1">男
				<input type="radio" name="userSex" value="2">女<br>
			生日:<input type="date" name="briths" id="briths"><br>
			<br>
			民族:<input type="text" name="nation" id="nation"><br>
			<br>
			省:<select id="sheng" onchange="getShi(this)">
			<option>--请选择--</option>
		</select>
			市:<select id="shi" onchange="getXian(this)">
			<option>--请选择--</option>
		</select><br>
			县(区):<select id="xian">
			<option>--请选择--</option>
		</select><br><br>
			详细地址:<input type="text" name="address" id="address">
		</form>
</body>
<script type="text/javascript">
	function getSheng(){
		$.ajax({
			url:"<%=path%>/tCityController/getCityByPid",
			data:{pid:0},
			dataType:"json",
			type:"post",
			async:false,
			success:function(result){
				var city = result;
				var html = "<option value='-1'>--请选择--</option>";
				$(city).each(function(i,e){
					html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
				})
				$("#sheng").html(html)
			},
			error:function(){
				toastr.error("系统异常,请联系管理员");
			}
		})
	}

	$(function(){
		getSheng();
	})

	function getShi(obj){
		var pid = $(obj).val();
		$.ajax({
			url:"<%=path%>/tCityController/getCityByPid",
			data:{pid:pid},
			dataType:"json",
			type:"post",
			async:false,
			success:function(result){
				var city = result;
				var html = "<option value='-1'>--请选择--</option>";
				$(city).each(function(i,e){
					html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
				})
				$("#shi").html(html)
				$("#xian").html("<option value='-1'>--请选择--</option>")
			},
			error:function(){
				toastr.error("系统异常,请联系管理员");
			}
		})
	}

	function getXian(obj){
		var pid = $(obj).val();
		$.ajax({
			url:"<%=path%>/tCityController/getCityByPid",
			data:{pid:pid},
			dataType:"json",
			type:"post",
			async:false,
			success:function(result){
				var city = result;
				var html = "<option value='-1'>--请选择--</option>";
				$(city).each(function(i,e){
					html += "<option value='"+e['id']+"'>"+e['name']+"</option>";
				})
				$("#xian").html(html)
			},
			error:function(){
				toastr.error("系统异常,请联系管理员");
			}
		})
	}
</script>
</html>